「站在巨人肩膀上，能幫助我們免去繁瑣細節，以專注在軟體開發上。」

接續上述在 前篇 提到的觀點，此筆記將提及打造產品的三個階段，以協助我們善用資源，並且為全端開發打好基礎，「讓每個人都能貢獻最獨特的自己」。而我認為這是在充滿開源文化的軟體科技領域，最核心的信念。

產品的地基、結構與建設

建築藍圖 from UNDERSTAND BUILDING CONSTRUCTION

打造全端產品看似高深莫測，實際上每個細節一一探究，也確實博大精深；但經歷循序漸進的學習，我發現真的能夠在半年內迅速入門。本篇筆記歸納了打造全端產品的三大程序，接下來的所有實作、練習，以及未來自己的 side project，乃至成為軟體工程師，我想都可以依循的這套程序。

這套程序其實是借鑑「建築產業」歷久彌新的 SOP，至今房屋仍舊以此順序搭建。

地基

一切建築唯有穩固根基，才能長久屹立。在 Web Dev 領域，地基指的就是 伺服器的架設、路由系統規劃及資料庫操作 。而「語言框架 framework」就提供了上述所需的重要基礎。

結構

完整有序的結構，有助於格局與房屋的構築。在 Web Dev 領域，結構就是 程式碼及檔案的管理原則 。而「MVC 軟體設計原則」就提供了條理清晰的管理模式。

建設

當地基與結構完備後，就只欠東風了，那東風就是產品的核心價值—— 所有的功能 。而在開源科技領域以提供許多「工具包（ Package, Module, Library）」以協助我們解決常見問題，將專注力留給核心功能。而核心功能通常圍繞「CRUD」四個面向。

用語言框架紮穩地基 Framework = Foundation

各個熱門程式語言通常都有一套完整框架，如 Ruby on Rails、Python 的 Django、PHP 的 Laravel，及我們正要使用的 JavaScript 的 Express。

而 Express 協助我們能快速有效地搭建伺服器最核心的部分——路由系統，也就是管理所請求 req 與回應 res 的中樞。

Express 路由系統

路由設計示意圖 from Alpha Camp's material

前篇 結尾提到打造網頁應用程式絕非單一頁面與檔案，所以需要路由系統來管理所有「URL 的處理程序」。也就是以某個「行動」處理從「URL」取得的「資源」。通常會如以下的模式：

router.get('/about', function (req, res) {
  // do something
})

RESTful 路由設計

在分工完善且不斷迭代的網路應用產品開發中，擁有一套一致的設計風格有助於前後端的互助合作。而目前業界採用的就是「REST（Representational State Transfer）」設計風格，而符合此風格的軟體架構我們稱 RESTful。

RESTful 路由設計以「資源」為中心，搭配 HTTP method 的行動，以及 CRUD 的資料操作。

RESTful 路由設計 from Alpha Camp's material

也就是以GET、POST、PATCH、PUT、DELETE 等 HTTP method 來新增（create）、讀取（read）、更新（update）、刪除（delete）從對應的 URL 取得的資料。

想科普地理解細節可以看這篇《How I Explained REST to My Wife》。

用設計原則打造結構 Principle = Structure

當我們拆解一個完整的產品，會發現超多資料夾及各自關聯的程式碼；如果我們全都放在各一個 HTML、CSS 和 JS 中，動輒上千行的程式碼會非常難以閱讀、維護及更新。而一套職責清晰的原則能讓管理變得容易。

關注點分離

關注點分離 (separation of concerns, SOC) 就是我們在開發時的可被理解為北極星指標的一個設計原則。簡單來說，就是讓程式碼成為分工僅然有序的企業體，透過各部門的協作，達成健康的持續營運。

以 MVC 實作關注點分離

在業界實務上，通常採 MVC（Model-View-Controller）來落實關注點分離的設計原則。在 《全端開發者必懂的「網路觀念」》 中，我們已經有初步的認識，分別是資料中心（倉儲中心）、畫面中心（包裝中心）與管理中心（物流中心）。

Model

Model 負責調度資料庫的資料，存放所有與產品功能、市場規則、使用者需求等有關的「商業邏輯」，如：

• 電商網站：會員折購、訂單免運門檻等。
• 共享平台：提供者與需求者的配對範圍、提供者的服務時段等。
• 社交謀體：朋友圈的關係網絡、貼文與回應的資訊等。
• 影音串流：個人與家庭版會員權限、推薦的熱門影音等。

View

View 包辦所有的佈局及排版，透過樣板引擎（template engine）將規劃好的視覺設計，搭配由 Model 取出的資料，渲染為瀏覽器可讀取的網頁。

Controller

Controller 掌握與使用者互動邏輯，也就是負責處理所有 request/response 的工作程序。接收到 request 後，它會向 Model 取得資料，並提供給 view 以建立樣板，並回傳給客戶端。例如：

• 哪些內容是登入後才能讀取？
• 送出表單後是如何回應？
• 資料更新後導向哪個頁面？

用完善功能構築建設 Fuction = Building

所有產品的核心、應用程式的價值主張，都反映在功能上。這也是真正解決使用者問題、滿足顧客需求，創造商業價值的所在。透過工具包（JavaScript 中常稱為 package）能輔助我們處理常見問題，而 CRUD 則滿足大部分的主要操作。

套用 Packages 處理常見問題

Packages 提供了一切常見狀況的解決方案，就像我們建商蓋房子時不會自己辦法製造電梯，而會像電梯供應商取得符合標準的好用電梯。因為我們主要的目的是提供溫馨舒適的房子（滿足需求的產品）。

在過去我們運用以下 Packages，以快速滿足某些需求：

• Bootstrap 快速搭建美觀介面
• Font Awesome 提供 icon
• Axios 串接 API

接下來我們還會使用幾個好用的 Packages，協助我們搭建應用程式：

• Handlebars 協助我們建立樣板
• Mongoose 幫助我們向資料庫溝通

聚焦 CRUD 打造功能

大部分的產品操作都聚焦在新增（create）、讀取（read）、更新（update）、刪除（delete）的核心功能。例如經典全端實務的 Todo List 就圍繞在各種代辦事項的管理。而細節的實作、踩過的坑、遇到的瓶頸，都將在後面的筆記一一揭露。

閱讀更多

關於本系列更多內容及導讀，請閱讀作者於 Medium 個人專欄 【無限賽局玩家 Infinite Gamer | Publication – 】 上的文章 《用 JavaScript 打造全端產品的入門學習筆記》系列指南。